/*
 * @Author: hy
 * @Date: 2018-05-02 09:52:10
 * @Last Modified by: hy
 * @Last Modified time: 2018-05-16 21:31:03b4038
 */

// 首页框架，底部tab和顶部导航栏

import React, { Component } from 'react'
import { WingBlank, WhiteSpace } from 'antd-mobile'
import NavBar from '@components/navbar'
import { withRouter } from 'react-router-dom'

@withRouter
export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // tab数据
      tabData: [
        {
          name: '大厅',
          title: '彩票大厅',
          iconNormal: 'dt1',
          iconActive: 'dt2',
          pathname: '/home/hall',
          key: 1,
        },
        {
          name: '开奖',
          title: '开奖大厅',
          iconNormal: 'kj1',
          iconActive: 'kj2',
          pathname: '/home/lottery',
          key: 2,
        },
        {
          name: '我的',
          title: '个人中心',
          iconNormal: 'yy1',
          iconActive: 'yy2',
          pathname: '/home/appointment',
          key: 3,
        },
      ],
    }
  }


  /**
   * @description 切换一个模块
   * @memberof Home
   */
  onChangeTab = (item) => {
    const { pathname } = this.props.location || {}
    if (item === 1) {
      // 大厅
      this.props.history.push({
        pathname: '/home/hall',
        query: {
          from: pathname,
        },
      })
    } else if (item === 2) {
      // 开奖
      this.props.history.push({
        pathname: '/home/lottery',
        query: {
          from: pathname,
        },
      })
    } else if (item === 3) {
      // 预约
      this.props.history.push({
        pathname: '/home/appointment',
        query: {
          from: pathname,
        },
      })
    }
  }


  render() {
    const { tabData } = this.state
    const { children, location = {} } = this.props
    const { pathname } = location
    let title = ''
    const fi = tabData.find(v => v.pathname === pathname)
    if (fi) {
      title = fi.title
    }
    return (
      <div className="home-wrap">
        <NavBar
          left={null}
          title={title}
        />
        <div className="home-content">
          {children}
        </div>
        <div className="home-footer">
          <ul className="tab-bar">
            {
              tabData.map(item => (
                <li key={item.key} onClick={() => this.onChangeTab(item.key)}>
                  <span className={`app-icon icon-${pathname === item.pathname ? item.iconActive : item.iconNormal}`} />
                  <span className={pathname === item.pathname ? 'font-red' : ' '}>{item.name}</span>
                </li>
              ))
            }
          </ul>
        </div>
      </div>
    )
  }
}
